﻿@{
    ViewBag.Title = "Wheel Of Fortune - High Scores";
}
    @section head{
<style>
    #container
    {
        
    }
    .opaqueLayer
    {
        position:absolute;
        top:60px;
        width:800px;
        height:480px;
        background-color:#000;
        z-index:1;
    }
    .main
    {
        position:absolute;
        top:60px;
         z-index:2;
         -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border:2px solid #aaa;
        color:#fff;
        background-color:transparent;
        margin:50px 100px;
        padding-left:20px;
        width:580px;
        height:380px;
    }
    #highScoreInfo
    {
       
    }
     #highScoreInfo ul
     {
         list-style-type:none;
         margin:0;
         padding:0;
         font-weight:bold;
     }
     #registeryourHighScore
     {
         margin-bottom:20px;
     }
     #registeryourHighScore a, #registeryourHighScore a:link
     {
         color:White;
         font-weight:bold;
     }
     
</style>

    <script src="@Url.Content("~/Scripts/Box2dWeb-2.1.a.3.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/gamvas.debug.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/game/HighScore_menustate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/game/game.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/game/coinemitter.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/game/fireworkemitter.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/AjaxService.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/fancybox/jquery.fancybox.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Content/fancybox/jquery.fancybox.pack.js")" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/fancybox/jquery.fancybox.css")" type="text/css" media="screen" />


<script id="ScoresTemplate" type="text/html">
<ul>
 <# for(var i =0; i < data.length; i++)
 { #>
    <li>
        <span><#= data[i].UserName #></span> - <span><#= data[i].Score #></span>
    </li>
  <# } #>
 </ul>
</script>
}
<div>
<div class=ElementsHolder_local>
    <div id="container">
        <canvas id="gameCanvas" width="800" height="480"></canvas>
    </div>
    <div class="opaqueLayer"></div>
    <div class="main">
        <h2>High Scores </h2>
        @if (!wheel.Models.GameInfo.Current.HighScoreRegistered && wheel.Models.GameInfo.Current.WordDiscovered && wheel.Models.GameInfo.Current.TotalScore > 0)
        {
        <div id="registeryourHighScore">
            Your Score : @wheel.Models.GameInfo.Current.TotalScore - <a href="#test" class="fancybox">Register your Score</a>
        </div>
        }
        <div id="highScoreInfo"></div>
    </div>
</div>
</div>

    @section footer{
    <div id="test" style="display:none;width:300px;">
<p>
Name : <input type="text" id="Username" /> <button id="submitScore">Submit</button>
</p>
</div>​

<script>
$(document).ready(function () {
    $(".fancybox").fancybox();
    $("#submitScore").click(function () {
        $.ajax({
            url: "@Url.Action("RegisterhighScore")",
            type: 'post',
            cache: false,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data:JSON.stringify({UserName: $('#Username').val()}),
            success: function (json) {
                $('#registeryourHighScore').hide();
                $("#highScoreInfo").html(parseTemplate($("#ScoresTemplate").html(), { data: json }));
                $.fancybox.close();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("error :" + XMLHttpRequest.responseText);
            }
        });
    });
    $(".opaqueLayer").css({ opacity: 0.7 });
    if ('@ViewBag.CurrentScore' != '' && '@ViewBag.CurrentScore' != null)
        $(".fancybox").click();
    //FillData("@Url.Action("GetNewWord", "AjaxService", null)", "#WordInfo", "#WordTemplate");
    FillData("@Url.Action("getHighScoreList")", "#highScoreInfo", "#ScoresTemplate");
 });
</script>
    }



